<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/base.css">
	</head>
	<body>
		<!-- F1: 页头(logo+搜索框+登录条) -->
		<div class="f1">
			<div class="container">
				<!-- ①最左侧的LOGO图片 -->
				<img class="logo" src="img/logo.png">
				<!-- ②中间的搜索框 -->
				<div class="search">
					<input placeholder="请输入要搜索的内容">
					<img src="img/search.png">
					<span>分类搜索</span>
					<b></b>
				</div>
				<!-- ③右侧的功能菜单 -->
				<ul class="menu">
					<li><img src="img/care.png"></li>
					<li><span>|</span></li>
					<li><img src="img/order.png"></li>
					<li><span>|</span></li>
					<li><img src="img/shop_car.png"></li>
					<li><span>|</span></li>
					<li><a href="#">注册</a></li>
					<li><span>|</span></li>
					<li><a href="#">登录</a></li>
				</ul>
			</div>
		</div>
		
		<!-- F2: 菜单栏 -->
		<div class="f2">
			<div class="container">
				<ul class="nav">
					<li><a href="index.html">首页</a></li>
					<li><a href="study.html">学习用品</a></li>
					<li><a href="private.html">私人订制</a></li>
				</ul>
			</div>
		</div>
		
		<!-- F3: 轮播广告 --> 
		<div class="f3">
			<div class="container">
				<div class="carousel">
					<img id="hero" src="img/banner1.png" alt="大图">
					<span class="left" id="prev">&lt;</span>
					<span class="right" id="next">&gt;</span>
					<ul>
						<li class="current"></li>
						<li></li>
						<li></li>
						<li></li>
					</ul>
				</div>
			</div>
		</div>
		
		<!-- F4: 首页推荐 -->
		<div class="f4">
			<div class="container">
				<!-- 楼层头部提示文字 -->
				<div class="header">
					<img src="img/computer_icon.png">
					<span class="h1">首页推荐 / 1F</span>
				</div>
				<!-- 楼层主体内容 -->
				<div class="content">
					<!-- 第一行有两个商品 610+10+380 -->
					<div class="product1">
						<!-- 左边：文字说明 -->
						<div class="desc">
							<div class="title">Apple MacBook Air系列</div>
							<div class="details">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</div>
							<div class="price">￥6988.00</div>
							<div class="btn">查看详情</div>
						</div>
						<!-- 右边：图片 -->
						<img class="pic" src="img/study_computer_img1.png">
					</div>
					<div class="product2">商品2</div>
					<!-- 第二行有四个商品 388+10+194+10+194+10+194 -->
					<div class="product3">商品3</div>
					<div class="product4">商品4</div>
					<div class="product4">商品4</div>
					<div class="product4">商品4</div>
				</div>
			</div>
		</div>
		
		<!-- F5: 最新上架 -->
		<div class="f5">
			<div class="container">五楼</div>
		</div>
		
		<!-- F6: 热销单品 -->
		<div class="f6">
			<div class="container">六楼</div>
		</div>
		
		<!-- F7: 底部功能菜单(四宫格) -->
		<div class="f7">
			<div class="container">七楼</div>
		</div>
		
		<!-- F8: 底部扩展菜单+版权声明 -->
		<div class="f8">
			<div class="container">八楼</div>
		</div>
		<script>
		  //轮播广告中的“下一项”按钮被单击时，切换到下一张
		  // let curCarouseIndex = 1  //当前轮播广告的下标
		  
		  // next.onclick = function(){
			 //  curCarouseIndex++
			 //  if(curCarouseIndex>4){
				//   curCarouseIndex = 1
			 //  }
			 //  hero.src = `img/banner${curCarouseIndex}.png`
		  // }
		</script>
	</body>
</html>
